<template>
  <div>
    <ol class="ranklist">
      <van-pull-refresh
        v-model="refreshing"
        success-text="刷新成功"
        @refresh="onPullRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li
            class="card"
            v-for="(item, index) in list"
            :key="item"
            :title="item"
          >
            <!-- 教练排名 -->
            <div class="ranking">
              <img v-show="index == 0" src="@/assets/icon_baoming/one.png" />
              <img v-show="index == 1" src="@/assets/icon_baoming/two.png" />
              <img v-show="index == 2" src="@/assets/icon_baoming/three.png" />
              <i v-show="index >= 3">{{ index + 1 }}</i>
            </div>
            <!-- 右部卡片内容 -->
            <div class="jxitem">
              <coachItem :coach="item"></coachItem>
            </div>
          </li>
        </van-list>
      </van-pull-refresh>
    </ol>
    <!-- 回顶按钮 -->
    <van-back-top bottom="60px" style="opacity: 0.6" />
  </div>
</template>

<script>
import coachItem from "./coachItem.vue";

import { ref, reactive } from "vue";
import httpApi from "@/http";
export default {
  setup() {
    const list = reactive([]);
    const loading = ref(false);
    const finished = ref(false);

    function initList() {
      let page= Math.floor(list.length / 8) + 1;
      let params = { page: page, pagesize: 8 };
      httpApi.coachApi.CoachScoreList(params).then((res) => {
        console.log("教练列表", res);
        list.push(...res.data.data.result);
        console.log(list);
        /* 据更新完毕后，将 loading 设置成 false */
        loading.value = false;
        /* 已加载到前端页面上的数据量(list数组长度)==驾校数据总量 */
        if (list.length >= res.data.data.total) {
          finished.value = true; //没有更多数据了,finished 已完成  true
        }
      });
    }

    const onLoad = () => {
      initList()
    };
    /* 下拉刷新 */
    const refreshing = ref(false);
    /* 下拉刷新时会触发 refresh 事件，，操作完成后将 v-model 设置为 false，表示加载完成。 */
    const onPullRefresh = () => {
      console.log("下拉刷新");
      showToast("刷新成功");
      onLoad();
      refreshing.value = false;
      finished.value = false;
    };

    return {
      initList,
      onPullRefresh,
      list,
      onLoad,
      loading,
      finished,
    };
  },
};
</script>

<style lang="scss" scoped>
.ranklist {
  width: 100%;
  padding: 0 10px;
  .card {
    display: flex;
    flex-wrap: nowrap;
    .ranking {
      width: 10%;
      display: flex;
      justify-content: center;
      align-items: center;

      > img {
        height: 30px;
        width: 30px;
      }
      > i {
        font-size: 16px;
      }
    }
    .jxitem {
      width: 90%;
    }
  }
}
</style>
